<template>
	<view class="content">
		<!-- 平台订单切换 -->
		<view class="plat-list">
			<view class="plat-item" :class="[{ active: platform === 0 }]" @tap="changePlatform(0)">
				<image class="images" src="@/static/images/member/taobao.png"></image>
				<text class="text">淘宝</text>
				<view class="triangle"></view>
			</view>
			<view class="plat-item" :class="[{ active: platform === 2 }]" @tap="changePlatform(2)">
				<image class="images" src="@/static/images/member/pinduoduo.png"></image>
				<text class="text">拼多多</text>
				<view class="triangle"></view>
			</view>
			<view class="plat-item" :class="[{ active: platform === 1 }]" @tap="changePlatform(1)">
				<image class="images" src="@/static/images/member/jingdong.png"></image>
				<text class="text">京东</text>
				<view class="triangle"></view>
			</view>
		</view>
		
		<!-- 订单状态切换 -->
		<tab
			ref="tab"
			@tabChange="tabChangeCustom"
			:list="list"
			:stickyTop="0"
			:index="active"
		></tab>
		
		<!--渲染订单列表-->
		<view class="order-box">
			<view class="total-desc" @tap="$Router.push('/pages/member/help')">
				订单将会有5分钟延迟！其他常见问题请点击查看
				<text class="iconfont icon-xiayiye"></text>
			</view>
			<view class="order-list">
				<order-item
					v-for="(orderItem, orderIndex) in list[active].goodsList"
					:key="orderIndex"
					:orderItem="orderItem"
				></order-item>
				<!-- 加载中插件 -->
				<load-more
					:loading="list[active].loading"
					:finished="list[active].finished"
					:empty="list[active].empty"
					emptyType="record"
					emptyText="暂无记录~"
				></load-more>
			</view>
		</view>
		
		<!-- 找回订单 -->
		<view class="find-order" @tap="$Router.push('/pages/member/entry')">
			<view class="left">
				<text class="iconfont icon-sousuo"></text>
				购物订单找回
				<text class="text">（仅限淘宝&天猫订单）</text>
			</view>
			<text class="iconfont icon-xiayiye"></text>
		</view>

		<!--回到顶部-->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
			<text class="iconfont icon-huidaodingbu"></text>
		</view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import loader from '@/utils/mixin/loader';
import Tab from '@/components/uni/Tab';
import LoadMore from '@/components/LoadMore';
import OrderItem from '@/components/member/OrderItem';
export default {
	name: 'member-order',
	components: {
		Tab,
		OrderItem,
		LoadMore
	},
	mixins: [loader],
	data() {
		return {
			platform: 0,
			totalList: [
				{
					name: '全部补贴(元)',
					num: '0',
					orderCount: '0',
					message: '全部补贴=入账中补贴+已入账补贴'
				},
				{
					name: '入账中(元)',
					num: '0',
					orderCount: '0',
					message: '入账中：订单已付款状态的补贴'
				},
				{
					name: '已入账(元)',
					num: '0',
					orderCount: '0',
					message: '已入账：订单已收货的补贴'
				}
			]
		};
	},
	onLoad(options) {
		if (options.type) {
			this.active = parseInt(options.type) + 1;
		}
		this.init();
	},
	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	methods: {
		init() {
			let arr = [
				{
					label: '全部'
				},
				{
					label: '入账中'
				},
				{
					label: '已入账'
				},
				{
					label: '已失效'
				}
			];
			arr.forEach(item => {
				item.loading = false;
				item.finished = false;
				item.empty = false;
				item.page = 1;
				item.goodsList = [];
			});
			this.list = arr;
			this.loadMore(this.list[this.active]);
		},
		beforeLoad() {
			if (this.active === 1) {
				// 1入账中
				this.params.status = 0;
			} else if (this.active === 2) {
				// 2 已入账
				this.params.status = 1;
			} else if (this.active === 3) {
				// 3 失效
				this.params.status = 2;
			} else {
				delete this.params.status;
			}
			this.params.order = 'createTime';
			this.params.sort = 'desc';
			this.params.source = this.platform;
			this.service = this.$service.member.order.page(this.params);
			return true;
		},
		changePlatform(plat) {
			this.platform = plat;
			
			this.onRefresh(this.list[this.active]);
		},
		message(msg) {
			uni.showModal({
				content: msg,
				showCancel: false
			});
		},
		tabChangeCustom(index) {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			this.active = index;
			this.onRefresh(this.list[index]);
			// this.list[index].goodsList = [];
			// // 触发高度更新
			// if (this.$refs.tabs) {
			// 	this.$refs.tabs.doLayout();
			// }
			// this.loadMore(this.list[index]);
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background: #f6f7fa;
	
	.plat-list {
		width: 100%;
		height: 172rpx;
		background: #fff;
		border-bottom: 2rpx solid #F0F0F0;
		@include flexBox(center, center);
		.plat-item {
			margin: 0 61rpx;
			opacity: 0.6;
			transition: 0.5s;
			position: relative;
			@include flexBox(center, center, column);
			.images {
				width: 66rpx;
				height: 66rpx;
			}
			.text {
				margin-top: 6rpx;
			}
			.triangle {
				width: 30rpx;
				height: 30rpx;
				border-top: 2rpx solid #F0F0F0;
				border-right: 2rpx solid #F0F0F0;
				transform: rotate(-45deg);
				background: #fff;
				position: absolute;
				bottom: -46rpx;
				opacity: 0;
				transition: 0.5s;
			}
			&.active {
				opacity: 1;
				color: #FC4F00;
				.triangle {
					opacity: 1;
				}
			}
		}
	}

	.order-box {
		width: 100%rpx;
		.total-desc {
			border-top: 1px solid #F6F7FA;
			color: #AAAAAA;
			background: #FFFFFF;
			padding: 20rpx 10rpx;
			font-size: 24rpx;
			margin-bottom: 20rpx;
			display: flex;
			@include flexBox(space-between, center);
			.iconfont {
				margin-right: 10rpx;
			}
		}
		.order-list {
			width: 700rpx;
			margin: 0 auto;
		}
	}
	
	.find-order {
		background: #FFF1E2;
		position: fixed;
		left: 20rpx;
		bottom: 48rpx;
		width: 710rpx;
		height: 80rpx;
		box-shadow:0px 6px 12px rgba(0,0,0,0.16);
		border-radius: 50rpx;
		padding: 0 34rpx;
		font-size: 28rpx;
		color: #7F552A;
		@include flexBox(space-between, center);
		.left {
			@include flexBox(null, center);
			.icon-sousuo {
				font-size: 36rpx;
				margin-right: 10rpx;
			}
			.text {
				font-size: 24rpx;
				color: $main-color;
			}
		}
	}
}
</style>
